<template>
  <view class="content" :style="{ height: `${windowHeight}px` }">
    <view class="top-info">
      <view class="top-info-top">
        <view class="top-info-top-left">
          我的车辆
        </view>
        <view class="top-info-top-right">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>

      <view class="top-info-mid">
        <view class="top-info-mid-left">
          电车
        </view>
        <view class="top-info-mid-right">
          <view class="top-info-mid-right-body">
            <view class="top-info-mid-right-body-top">
              当前费用
            </view>
            <view class="top-info-mid-right-body-bottom">
              ￥58.85
            </view>
          </view>
        </view>
      </view>

      <view class="top-info-bottom">
        <u--image
            :showLoading="true"
            mode="aspectFit"
            :lazyLoad="true"
            src="https://img.js.design/assets/img/684fc98cc99a0c9439a429bb.png#70658c94953044749855573829c9cd4a"
        ></u--image>
      </view>
    </view>
    <view class="btns">
      <u-grid
          @click="click"
      >
        <u-grid-item class="btns-item"
            v-for="(baseListItem,baseListIndex) in baseList"
            :key="baseListIndex"
        >
          <text class="grid-text">{{baseListItem.title}}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="support">
      <view class="support-left">
        <u-icon name="phone" size="22"></u-icon>
        <view class="support-left-text">
          <text class="support-text">在线客服</text>
          <text class="support-text">在线客服</text>
        </view>
      </view>
      <view class="support-right">
        <u-icon name="phone" size="22"></u-icon>
        <text class="support-text">使用指南</text>
      </view>
    </view>
    <view class="bottom">
      <u-button type="primary" text="确定"></u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import modal from "@/plugins/modal";
import {getWxCode} from "@/utils/geek";
import {wxLogin} from "@/api/oauth";
import {setToken} from "@/utils/auth";
import useUserStore from "@/store/modules/user";

const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
const userStore = useUserStore()
const chartData = ref({});
const text1 = ref('uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用');
const baseList = [{
  name: '@/static/images/index/ljcz.png',
  title: '账户充值'
},
  {
    name: '@/static/images/index/zjcd.png',
    title: '最近充电'
  },
]


onMounted(() => {
  getServerData();
  autoLogin();
});


function click(name) {
  modal.alert(`点击了第${name}个`)
}

function autoLogin() {
  // 模拟登录
  getWxCode().then(res => {
    console.log(res);
    wxLogin('miniapp',res).then(res => {
      if(res.token != null){
        setToken(res.token);
        loginSuccess()
      }
    });
  })
}

function loginSuccess(result) {
  // 设置用户信息
  userStore.getInfo().then(res => {
    console.log(res)
  })
}


function getServerData() {
  // 模拟从服务器获取数据时的延时
  setTimeout(() => {
    let res = {
      categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
      series: [
        {
          name: '目标值',
          data: [35, 36, 31, 33, 13, 34],
        },
        {
          name: '完成量',
          data: [18, 27, 21, 24, 6, 28],
        },
      ],
    };
    chartData.value = JSON.parse(JSON.stringify(res));
  }, 500);
}
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-size: 100% 100%;
  left: 0px;
  padding-top: 15vh;
  opacity: 1;
  background-image: url(https://img.js.design/assets/img/684ebb37c99a0c94397f76d1.png#69afc435af1ef00e111c924dae2437e8);
  width: 100%;
}

.top-info{
  width: 90%;
  border-radius: 1vh;
  padding: 1vh 2vh;
  margin: 1vh;
  background-color: #FDFDFDFF;
}

.top-info-top{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  margin: 1vh auto;
}

.top-info-top-left{
  font-size: 16px;
  font-weight: 600;
}

.top-info-mid{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  margin: 2vh auto;
}

.top-info-mid-right-body-top{
  font-size: 14px;
  font-weight: 600;
  right: 0;
}

.top-info-mid-right-body-bottom{
  font-size: 16px;
  font-weight: 600;
}

</style>
